<template>
  <div class="AddOrUpdate_main add_container column_one">
    <div class="main_main">
      <div class="formItem_tip">
        <svg-icon icon-class="不足" />
        <div>欢迎您提交宝贵的反馈，请认真填写下述信息，以便我们更好的了解您的需求，我们将尽快与您联系！</div>
      </div>
      <el-form ref="form" :model="formData" :inline="true" :rules="rules" label-position="top">
        <el-form-item label="您想反馈哪方面的问题？" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio label="漏洞(bug)" />
            <el-radio label="产品优化" />
            <el-radio label="新需求" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="添加您的问题附件" class="double">
          <FileManageFull
            :file-names="formData.opinionFileNames"
            :file-real-names="formData.opinionFileRealNames"
            :file-urls="formData.opinionUrls"
            :row-index="1"
            @fileName="setFileName2"
          />
        </el-form-item>
        <el-form-item label="问题描述" prop="description" class="notice_main">
          <rich-text
            ref="wangEditorRef"
            :disabled="editorDescription.isDisabled"
            :editor-params="editorDescription"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottoms">
      <el-button @click.stop="onSubmit('0')">存草稿</el-button>
      <div>
        <el-button type="cancel" @click.stop="cancel">取消</el-button>
        <el-button @click.stop="onSubmit('1')">提交处理</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo, addOrUpdate } from '@/api/superManage/systemMonitoring/feedBack'
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    id: {},
    showKey: {},
    showData: {}
  },
  data() {
    const validate_description = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        callback('问题描述不能为空')
      } else {
        callback()
      }
    }
    return {
      formData: {
        type: '漏洞(bug)',
        opinionFileNames: '',
        opinionFileRealNames: '',
        opinionUrls: '',
        description: '',
        status: '0'
      },
      editorDescription: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        isDisabled: false // 富文本是否禁用
      },
      rules: {
        type: [
          { required: true, message: '反馈问题方向不能为空', trigger: 'change' }
        ],
        description: [
          { required: true, validator: validate_description, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if (this.id) {
      this.getInfoDisk()
    }
  },
  mounted() {

  },
  methods: {
    setFileName(...data) {
      this.formData.responseFileNames = data[0]
      this.formData.responseFileRealNames = data[1]
      this.formData.responseUrls = data[2]
    },
    setFileName2(...data) {
      this.formData.opinionFileNames = data[0]
      this.formData.opinionFileRealNames = data[1]
      this.formData.opinionUrls = data[2]
    },
    getInfoDisk() {
      getInfo(this.id).then(res => {
        this.formData = res.data
        this.editorDescription.content = this.formData.description
      })
    },
    onSubmit(num) {
      const wangEditorRef = this.$refs.wangEditorRef
      if (wangEditorRef != null) {
        var noticeContent1 = wangEditorRef.getEditorHtml()
        this.formData.description = noticeContent1 == '<p><br></p>' ? '' : noticeContent1
      }
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.status = num
          addOrUpdate(this.formData).then(res => {
            this.$message.success(res.msg)
            this.$layer.close(this.layerid)
            this.$parent.refresh()
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
  .main_bottoms{
    padding: 0px 20px;
    height: 70px;
    display: flex;justify-content: space-between;align-items: center;
    /deep/ .el-button{
      margin-left: 10px;
    }
    box-shadow: 0px 0px 6px 0px rgba(29, 65, 134, 0.18);
    border-top: 1px solid rgba(29, 65, 134, 0.18);
  }
.formItem_tip{
  display: flex;
  align-items: center;
  padding: 20px 30px;
  font-size: 14px;
  color: #FF9900;
  div{
    padding-left: 10px;
  }
}
.notice_main{
  width: 100% !important;
  /deep/ .el-textarea__inner{
    height: 400px;
    width: 100%;
  }
}
.main_main{
  padding-top: 0 !important;
  /deep/ .el-form-item{
    display: block;
  }
  /deep/ .el-form-item__label{
    width: 100%;
  }
  /deep/ .el-form-item__content{
    width: calc(100% - 20px)!important;
    margin: 10px;
  }
}
.border_bottom{
    border-bottom: 1px solid rgba(105,105,105,0.2);
    padding-bottom: 10px;
}
.space{
    /deep/ .el-form-item__label{
        color: #666 !important;
    }
}
.noData{
  color: #c0c4cc;
}
.showPicture{
  display: flex;
  .pictureCode_div{
  }
  .file_div{
    margin-left: 10px;
    // color: blue;
  }
}
/deep/ .el-form-item{
  .el-form-item__label{
    // color: #1F51B3;
    font-size: 15px;
  }
  .el-form-item__content{
    color: #333333;
    font-size: 15px;
  }
}
.el-table {
  font-size: 15px;
}
</style>
